<template>
  <div style="width: 50%;margin: 10px auto">
    <div class="card">
      <div style="font-size: 20px;text-align: center;margin-bottom: 40px">{{ posts.title}}</div>
      <div style="display: flex; justify-content: center; color: #666666; margin-bottom: 30px;">
        <span><i class="el-icon-user"></i>{{ posts.userName }}</span>
        <span style="margin-left: 20px"><i class="el-icon-time"></i>{{ posts.time }}</span>
        <span style="margin-left: 20px"><i class="el-icon-reading"></i>{{ posts.readCount }}</span>
      </div>
      <div class="w-e-text">
        <div v-html="posts.content" v-if="this.content !== '' && this.content !== null" class="w-e-text"></div>
        <div v-else class="w-e-text">暂无内容</div>
      </div>
    </div>
    <div class="card">
      <Comment :fid="id" module="posts"/>
    </div>
  </div>
</template>

<script>
import Comment from "@/components/Comment.vue";
export default {
  name: "PostsDetail",
  data(){
    return{
      id:this.$route.query.id,
      posts:{}
    }
  },
  components: {
    Comment
  },
  created() {
    this.$request.put(`/posts/updateCount/${this.id}`).then(res=>{
      if(res.code==='200'){
        this.load();
      }else{
        this.$message.error(res.msg);
      }
    });
    this.load();
  },
  methods:{
    load(){
      this.$request.get(`/posts/selectById/${this.id}`).then(res=>{
        if(res.code==='200'){
          this.posts=res.data || {};
        }else{
          this.$message.error(res.msg);
        }
      });
    }
  }
}
</script>

<style scoped>
.card {
  /* 背景颜色 */
  background-color: #fff;

  /* 边框样式 */
  border: 1px solid #e0e0e0;

  /* 圆角 */
  border-radius: 8px;

  /* 盒子阴影效果 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  /* 内边距 */
  padding: 20px;

  /* 外边距 */
  margin: 20px 0;

  /* 宽度设置，可以根据实际情况调整 */
  width: 100%;

  /* 确保内容垂直居中 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.parent-container {
  display: flex;
  justify-content: center;
}

/* 子元素的样式 */
.child-container {
  display: flex;
  justify-content: center;
  color: #666666;
  margin-bottom: 10px;
}
</style>